<!--
* description: 善意索赔维护
* author:wangjuan
* createdDate:2020-12-4
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="善意索赔申请"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closeEdit"
      @opened="open"
    >
      <dialogHeader
        slot="title"
        title="善意索赔申请"
        :style-type="$store.state.app.dialogType"
      />
      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable"
            :dynamic-components="tableComponents"
            :dynamic-api-config="apiConfig"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">客户车辆信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable1"
            :dynamic-components="tableComponents1"
            :dynamic-form-fields="formField1"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">补偿信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable2"
            :dynamic-components="tableComponents2"
            :dynamic-form-fields="formField2"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">审核意见</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable3"
            :dynamic-components="tableComponents3"
            :dynamic-form-fields="formField3"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>

        <el-button class="add" v-show="btnShow" type="primary" @click="pass"
          >通过</el-button
        >
        <el-button class="add" v-show="btnShow" type="primary" @click="rejected"
          >驳回</el-button
        >
      </div>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          @click="comp.clickEvent"
          >{{ comp.text }}</el-button
        > -->
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import { vehiclePdiPriceInquirys } from "@/api/se/vehiclePdiPriceInquiry";

export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader"),
    mixButton: () => import("@/components/basicComponent/mixButton"),
    OneTableTemplate
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);
    return {
      btnShow: true,

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
              {
                compKey: "compKey1",
                labelName: "申请单号：",
                codeField: "complainCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey3",
                labelName: "门店名称：",
                codeField: "dlrFullName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey2",
                labelName: "门店编码：",
                codeField: "dlrCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "关联投诉单编号：",
                codeField: "ccCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              }
            ],
      // 动态组件-查询条件
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents1
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .formComponents1
          : [
              {
                compKey: "compKey1",
                labelName: "VIN码：",
                codeField: "vin",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isRequire: true,
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey3",
                labelName: "车型：",
                codeField: "carConfigCn",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey2",
                labelName: "车系：",
                codeField: "carSeriesCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "车型名称：",
                codeField: "carSeriesCn",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "生产日期：",
                codeField: "produceDate",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "销售日期：",
                codeField: "saleDate",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              }
            ],

      tableComponents2:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents2
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .formComponents2
          : [
              {
                compKey: "compKey1",
                labelName: "积分：",
                codeField: "integral",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              }
            ],

      tableComponents3:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents3
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .formComponents3
          : [
              {
                compKey: "compKey1",
                labelName: "审核意见：",
                codeField: "auditMemo",
                component: () =>
                  import("@/components/org/commonInput/textareaInput"),
                type: "inputText",
                isMust: true,
                span: 24,
                disabled: false
              }
            ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          complainCode: "",
          dlrFullName: "",
          dlrCode: "",
          ccCode: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      formField1: this.$utils.getFormField(
        this,
        {
          vin: "",
          carConfigCn: "",
          carSeriesCode: "",
          carSeriesCn: "",
          produceDate: "",
          saleDate: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      formField2: this.$utils.getFormField(
        this,
        {
          integral: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      formField3: this.$utils.getFormField(
        this,
        {
          auditMemo: "",
          complainStatus: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    };
  },

  methods: {
    closeEdit() {
      this.$emit("close");
      this.$emit("update:curPopupsVisible", false);
    },
    open() {
      if (this.popupsState == "look" || this.popupsState == "edit") {
        const queryObj = {
          // 保存mutation
          type: "mutation",
          // api配置
          apiConfig: {
            APIUrl:
              "/mp/e3sh/aftersale/ClaimInGoodFaithService/findClaimDetail.do"
          },
          // 条件/实体参数（变量），根据typeParam中的定义配置
          variables: {
            complainId: this.dynamicEditRowData.complainId
          }
        };
        // 转换了中台请求格式数据
        var paramD = this.$getParams(queryObj);
        // 调用中台API方法（可复用）
        this.$requestAPI(paramD).then(response => {
          this.formField.complainCode = response.rows[0].complainCode;
          this.formField.dlrFullName = response.rows[0].dlrFullName;
          this.formField.dlrCode = response.rows[0].dlrCode;
          this.formField.ccCode = response.rows[0].ccCode;

          this.formField1.vin = response.rows[0].vin;
          this.formField1.carConfigCn = response.rows[0].carConfigCn;
          this.formField1.carSeriesCode = response.rows[0].carSeriesCode;
          this.formField1.carSeriesCn = response.rows[0].carSeriesCn;
          this.formField1.produceDate = response.rows[0].produceDate;
          this.formField1.saleDate = response.rows[0].saleDate;

          this.formField2.integral = response.rows[0].integral;
          this.formField3.auditMemo = response.rows[0].auditMemo;
        });
      }
      if (this.popupsState == "edit") {
        this.tableComponents3[0].disabled = false;
        this.btnShow = true;
      }
      if (this.popupsState == "look") {
        this.tableComponents3[0].disabled = true;
        this.btnShow = false;
      }
    },
    pass() {
      this.formField3.complainStatus = "3";
      this.aaa()
    },
    rejected() {
      this.formField3.complainStatus = "4";
      this.aaa()
    },
    aaa() {
      const queryObj = {
        // 保存mutation
        type: "mutation",
        // api配置
        apiConfig: vehiclePdiPriceInquirys.editClaim,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          complainStatus: this.formField3.complainStatus, //通过=3，驳回=4
          auditMemo: this.formField3.auditMemo,
          complainId: this.dynamicEditRowData.complainId
        }
      };
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj);
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === "1") {
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 2000
          });
          this.curPopupsVisible = false;
          this.$emit("close");
        } else {
          // 保存失败
          this.$message({
            message: "保存失败:" + response.msg,
            type: "warn",
            uration: 2000
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.promptSpan {
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
</style>

